#{extends 'content.html' /}
#{set title:  '与'+ models.User.findById(talkWith).name +'聊天' /}
#{set talkWithName : models.User.findById(talkWith).name/}
#{set talkWithImg : models.User.findById(talkWith).avatar/}
#{set user_name : usr.name /}
#{set index :'active' /}
#{set user_img : usr.avatar/}
#{set user_post_cnt : usr.postCnt/}
#{set user_followers_cnt : usr.followersCnt/}
#{set user_following_cnt : usr.followingCnt/}
<br>
<h2>正在与#{get 'talkWithName'/}聊天</h2>
<hr>

<div id="talk_content" style="height:500px;overflow:scroll;">
    &nbsp;  
</div>
<input type="text" style="position: relative; top:20px;" rel="tooltip" title="聊天文本框">
<input type="button" class="btn btn-success" value="发送" id="btn_send" style="position: relative; top:16px;" rel="tooltip" title="发送消息">


<script>
    $(function(){
        $("#btn_send").click(function(){
            var txt = $("input[type='text']").val();
            //var df=new SimpleDateFormat();//jsJava1.0需要使用DateFormat对象，不要弄错就是了 
            //df.applyPattern("yyyy-MM-dd HH:mm:ss"); 
            //var date = new Date();
            var d=new Date(); 
            var formatdate=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            //var dateStr=df.format(date);
            $.ajax({
                url:"@{Chat.sendMessageTo(talkWith)}",
                data: {
                    message: $("input[type='text']").val()
                }
            });
            $("#talk_content").append(formatdate+"<br><div class=\"alert alert-error\"><img src=\"${user_img}\" style=\"width: 32px;height: 32px\" >#{get 'user_name'/}："+txt+"</div>"); 
        });
    
        setInterval(function(){
            
            $.get("@{Chat.getMessageFrom(talkWith)}").done(function(data){
                if(data!=""){
                    $(data).each(function(i,e){
                        var d=new Date(); 
                        var formatdate=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
                        $("#talk_content").append(formatdate+"<br><div class=\"alert alert-success\"><img src=\"${talkWithImg}\" style=\"width: 32px;height: 32px\" >#{get 'talkWithName'/}："+e+"</div>");
                    });
                }
            }); 
    
        },1500);
    });
</script>
